<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0 user-scalable=no"
    />
    <link rel="stylesheet" href="../src/xr-ui.css" />
    <title>Article文本</title>
  </head>
  <body>
    <div class="xr-content">
      <div class="xr-article fold">
        <h1 class="xr-article-title">什么是UI框架</h1>
        <p class="xr-article-info">作者:Rosen</p>
        <div class="xr-article-content">
          <h2 class="xr-article-subtitle">UI是什么？</h2>
          <p class="xr-article-paragraph">
            先来说下UI，这俩字母是User
            Interface的缩写，一般翻译成“用户界面”。UI最主要的功能就是建立用户和系
            统后台之间的联系，系统后台通过UI把数据转换成可视化的内容展示给用户，同时用户也要通过UI把操作指令(包括数据)传给系统后台。
          </p>
          <p class="xr-article-paragraph">
            对UI不太熟悉的同学一听到这个概念，可能会觉得它的作用就是怎么把一个产品做的漂亮，所以UI设计师
            经常被人叫成美工。而事实上UI应该是负责“交互”和“视觉”这两方面的工作，这两部分内容构成了产品的用户体验。
          </p>
          <p class="xr-article-paragraph">
            用户体验里最重要的应该是这个产品好不好用，也就是“交互”这部分，这其中包括产品功能是否完善，产
            品流程是否设计的合理，使用是否方便，操作是否流畅等。在一些大公司里，为了保证产品好用，还会专门设置交互设计师这个职位，专门做交互部
            分的设计工作。
          </p>
          <img
            class="xr-article-img"
            src="../image/modal-test.png"
            alt="测试图片"
          />
        </div>
        <!-- 点击暂开的组件 -->
        <div class="xr-article-unfold-btn" id="js-unfold">
          <i class="fa fa-angle-double-down fa-vibrate-y"></i>
        </div>
      </div>
      <div class="xr-panel">
        <div class="xr-panel-title">其他内容</div>
        <div class="xr-panel-body">其他内容.........</div>
      </div>
    </div>

    <script>
      window.onload = () => {
        // 展开文章
        document.querySelector('#js-unfold').onclick = (e) => {
          document.querySelector('.xr-article').classList.remove('fold');
        };
      };
    </script>
  </body>
</html>
